<template>
  <div class="contain" style="overflow: hidden;width: 1000px;">
    <p style="margin-left: 35%;font-size: 30px;">石油设备变更管理系统</p>
    <br>
    <hr style="background-color: #409EFF;border-color: #409EFF;">
    <div class="selectbox">
      输入设备ID：
      <div class="inputbox">

        <input id="get_info" style="width: 250px;height:30px;border-radius: 10px;border:2px solid #409EFF;padding-left: 5px;" type="text" placeholder="  输入石油设备编号进行查询" >
      </div>
      <div id="get" class="checkbox">查询</div>
      <div id="add" class="checkbox" style="width: 170px;">添加设备变动信息表</div>
    </div>
    <div class="addto">
      <input id="id_info" class="submitinfo" style="width: 250px;height:30px;border-radius: 10px;border:2px solid #409EFF;padding-left: 5px;" type="text" placeholder="  输入石油设备编号" ><br>
      <input id="name_info" class="submitinfo" style="width: 250px;height:30px;border-radius: 10px;border:2px solid #409EFF;padding-left: 5px;" type="text" placeholder="  输入石油设备名称" ><br>
      <input id="origin_info" class="submitinfo" style="width: 250px;height:30px;border-radius: 10px;border:2px solid #409EFF;padding-left: 5px;" type="text" placeholder="  输入石油设备来源" ><br>
      <input id="out_info" class="submitinfo" style="width: 250px;height:30px;border-radius: 10px;border:2px solid #409EFF;padding-left: 5px;" type="text" placeholder="  输入石油设备去向" ><br>
      <input class="submit_button" type="button" value="确定" @click="addsubmit">
    </div>
    <div class="readd">
      <input id="id_info2" class="submitinfo" style="width: 250px;height:30px;border-radius: 10px;border:2px solid #409EFF;padding-left: 5px;" type="text" placeholder="  输入石油设备编号" readonly unselectable="on"><br>
      <input id="name_info2" class="submitinfo" style="width: 250px;height:30px;border-radius: 10px;border:2px solid #409EFF;padding-left: 5px;" type="text" placeholder="  输入石油设备名称" ><br>
      <input id="origin_info2" class="submitinfo" style="width: 250px;height:30px;border-radius: 10px;border:2px solid #409EFF;padding-left: 5px;" type="text" placeholder="  输入石油设备来源" ><br>
      <input id="out_info2" class="submitinfo" style="width: 250px;height:30px;border-radius: 10px;border:2px solid #409EFF;padding-left: 5px;" type="text" placeholder="  输入石油设备去向" ><br>
      <input class="submit_button2" type="button" value="修改">
    </div>
    <div class="infobox">
      <table id="1" cellpadding="0" cellspacing="0">
        <tr id="menu">
          <td class="id">设备编号</td>
          <td class="name">设备名称</td>
          <td class="origin">来源</td>
          <td class="out">去向</td>
          <td class="status">状态</td>
          <td class="work">同意审批/修改/删除</td>

        </tr>
        <tr class="machine">
          <td class="id">1</td>
          <td class="name">设备名称</td>
          <td class="origin">来源</td>
          <td class="out">去向</td>
          <td class="status">状态</td>
          <td class="work">
            <div class="work_1">审批</div>
            <div class="work_2">修改</div>
            <div class="work_3">删除</div>
          </td>

        </tr>
        <tr class="machine">
          <td class="id">2</td>
          <td class="name">设备名称</td>
          <td class="origin">来源</td>
          <td class="out">去向</td>
          <td class="status">状态</td>
          <td class="work">
            <div class="work_1">审批</div>
            <div class="work_2">修改</div>
            <div class="work_3">删除</div>
          </td>

        </tr>
        <tr class="machine">
          <td class="id">3</td>
          <td class="name">设备名称</td>
          <td class="origin">来源</td>
          <td class="out">去向</td>
          <td class="status">状态</td>
          <td class="work">
            <div class="work_1">审批</div>
            <div class="work_2">修改</div>
            <div class="work_3">删除</div>
          </td>

        </tr>
        <tr class="machine">
          <td class="id">4</td>
          <td class="name">设备名称</td>
          <td class="origin">来源</td>
          <td class="out">去向</td>
          <td class="status">状态</td>
          <td class="work">
            <div class="work_1">审批</div>
            <div class="work_2">修改</div>
            <div class="work_3">删除</div>
          </td>

        </tr>
        <tr class="machine">
          <td class="id">5</td>
          <td class="name">设备名称</td>
          <td class="origin">来源</td>
          <td class="out">去向</td>
          <td class="status">状态</td>
          <td class="work">
            <div class="work_1">审批</div>
            <div class="work_2">修改</div>
            <div class="work_3">删除</div>
          </td>

        </tr>
        <tr class="machine">
          <td class="id">6</td>
          <td class="name">设备名称</td>
          <td class="origin">来源</td>
          <td class="out">去向</td>
          <td class="status">状态</td>
          <td class="work">
            <div class="work_1">审批</div>
            <div class="work_2">修改</div>
            <div class="work_3">删除</div>
          </td>

        </tr>
        <tr class="machine">
          <td class="id">7</td>
          <td class="name">设备名称</td>
          <td class="origin">来源</td>
          <td class="out">去向</td>
          <td class="status">状态</td>
          <td class="work">
            <div class="work_1">审批</div>
            <div class="work_2">修改</div>
            <div class="work_3">删除</div>
          </td>

        </tr>

      </table>
    </div>

  </div>
</template>

<script>
  import $ from 'jquery'
  export default {
    name: 'index',
    data(){
      return {

      }
    },
    methods:{
      addsubmit(){
        this.$nextTick(_=>{
          var add_status_1=0;
          var add_status_2=0;
          $(".addto").css("display","none");
          add_status_1=0;
          //此处需要使用接口返回值判断是否提交成功
          var id=$("#id_info").val();
          var name=$("#name_info").val();
          var origin=$("#origin_info").val();
          var out=$("#out_info").val();
          if($.trim(id)==""||$.trim(name)==""||$.trim(origin)==""||$.trim(out)=="")
          {
            alert("信息不完整！");
          }
          else
          {
            //调用接口向数据库添加变动信息
            var text="<tr class=\"machine\">"+
              "<td class=\"id\">"+id+"</td>"+
              "<td class=\"name\">"+name+"</td>"
              +"<td class=\"origin\">"+origin+"</td>"
              +"<td class=\"out\">"+out+"</td>"
              +"<td class=\"status\">申请中</td>"
              +"<td class=\"work\"><div class=\"work_1\">审批</div>"
              +"<div class=\"work_2\">修改</div>"
              +"<div class=\"work_3\">删除</div></td>"
              +"</tr>";
            console.log(text);
            $("#1").append(text);
            alert("提交成功！");
          }
        })



  },
    },
    mounted() {
      var add_status_1=0;
      var add_status_2=0;
      $(".checkbox").on('mousedown', function(){
        $(this).css('background-color','#3A8EE6')
      })
      $(".checkbox").on('mouseup', function(){
        $(this).css('background-color','#409EFF')
      })
      $(".work_1").on('mousedown', function(){
        $(this).css('background-color','#3A8EE6')
      })
      $(".work_1").on('mouseup', function(){
        $(this).css('background-color','#409EFF')
        //调用审批接口
        if(confirm("是否同意审批？")){
          $(this).parent().parent().find(".status").text("已审批");
        }
      })
      $(".work_2").on('mousedown', function(){
        $(this).css('background-color','#3A8EE6')
      })
      $(".work_2").on('mouseup', function(){
        $(this).css('background-color','#409EFF')
        if(add_status_2==0)

        {
          $(".readd").css("display","inline-block");
          var id=$(this).parent().parent().find(".id").text();
          $(".readd #id_info2").val(id);
          add_status_2=1;
        }
        else
        {
          $(".readd").css("display","none");
          add_status_2=0;
        }
      })
      $(".work_3").on('mousedown', function(){
        $(this).css('background-color','#3A8EE6')
      })
      $(".work_3").on('mouseup', function(){
        $(this).css('background-color','#409EFF')
        //调用删除接口
        if(confirm("是否删除？")){
          $(this).parent().parent().remove();
        }
      })
      $("#add").on('mouseup', function(){
        if(add_status_1==0)

        {
          $(".addto").css("display","inline-block");
          add_status_1=1;
        }
        else
        {
          $(".addto").css("display","none");
          add_status_1=0;
        }

      })
      function addsubmit(){
        $(".addto").css("display","none");
        add_status_1=0;
        //此处需要使用接口返回值判断是否提交成功
        var id=$("#id_info").val();
        var name=$("#name_info").val();
        var origin=$("#origin_info").val();
        var out=$("#out_info").val();
        if($.trim(id)==""||$.trim(name)==""||$.trim(origin)==""||$.trim(out)=="")
        {
          alert("信息不完整！");
        }
        else
        {
          //调用接口向数据库添加变动信息
          var text="<tr id=\"machine\">"+
            "<td class=\"id\">"+id+"</td>"+
            "<td class=\"name\">"+name+"</td>"
            +"<td class=\"origin\">"+origin+"</td>"
            +"<td class=\"out\">"+out+"</td>"
            +"<td class=\"status\">申请中</td>"
            +"<td class=\"work\"><div class=\"work_1\">审批</div>"
            +"<div class=\"work_2\">修改</div>"
            +"<div class=\"work_3\">删除</div></td>"
            +"</tr>";

          console.log(text);
          $("#1").append(text);
          alert("提交成功！");

        }

      }
      $("#get").on("click",function(){
        var id=$("#get_info").val();
        if($.trim(id) != ""){
          console.log($.trim(id));
          $("#machine>.id").parent().hide();
          $("#machine>.id").filter(":contains('"+id+"')").parent().show();
        }else{
          $('#machine>.id').parent().show();//当删除文本框的内容时，又重新显示表格所有内容
        }
      })
      $(".submit_button2").on("click",function(){
        add_status_2=0;
        var id=$("#id_info2").val();
        var name=$("#name_info2").val();
        var origin=$("#origin_info2").val();
        var out=$("#out_info2").val();

        if($.trim(id)==""||$.trim(name)==""||$.trim(origin)==""||$.trim(out)=="")
        {
          alert("信息不完整！");
        }
        else
        {
          var readd_machine=$("#machine>.id").filter(":contains('"+id+"')").parent();
          console.log(readd_machine);
          $(readd_machine).find(".name").text(name);
          $(readd_machine).find(".origin").text(origin);
          $(readd_machine).find(".out").text(out);
          $(this).parent().hide();
          alert("修改成功!");
        }
      })
    }
  }

</script>

<style scoped>/*去掉scoped，新增加的*/
  *{
    margin: 0px;
    padding: 0px;
  }
  .contain{
    margin:auto;
  }
  .selectbox{
    width: 1000px;
    height: 60px;
    overflow: hidden;
    padding-left: 70px;
  }
  .checkbox{
    width: 100px;
    height: 50px;
    margin-top: 5px;
    background-color: #409EFF;
    margin-left: 100px;
    text-align: center;
    line-height: 60px;
    display: inline-block;
    border-radius: 10px;
    text-align: center;
    line-height: 50px;
    cursor:pointer;
    color: white;
    font-weight: bold;
  }
  .inputbox{
    margin-left: 10px;
    display: inline-block;
    width: 200px;
  }

  .infobox{
    width: 1000px;
  }
  .checkbox:hover{
    background-color: #409EFF;
  }
  input:focus{
    outline: none;
  }
  >>>table{
    width: 1000px;
    border:2px solid #409EFF ;
    border-collapse: collapse;

  }
 >>> td{
    border:2px solid #409EFF ;

    text-align: center;
    height: 60px;
  }
 >>> .id{
    width:193px ;
  }
 >>> .name{
    width: 193px;
  }
  .origin{
    width: 102px;
  }
 >>> .out{
    width:102px;
  }
  >>>.status{
    width: 102px;
  }
 >>> .work{
    width: 304px;
    overflow: hidden;
  }
 >>> .work_1{
    height: 30px;
    width: 70px;
    margin-left: 5px;
    background-color: #409EFF;
    display: inline-block;
    cursor:pointer;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
    color: white;
  }
 >>> .work_2{
    height: 30px;
    width: 70px;
    margin-left: 5px;
    background-color: #409EFF;
    display: inline-block;
    cursor:pointer;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
    color: white;
  }
 >>> .work_3{
    height: 30px;
    width: 70px;
    margin-left: 5px;
    background-color: #409EFF;
    display: inline-block;
    cursor:pointer;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
    color: white;
  }
  .addto{
    width: 500px;
    height: 300px;
    overflow: hidden;
    display: none;
    border: 2px solid #409EFF;
    border-radius: 10px;
    margin-left: 230px;
  }
  .readd{
    width: 500px;
    height: 300px;
    overflow: hidden;
    display: none;
    border: 2px solid #409EFF;
    border-radius: 10px;
    margin-left: 230px;
  }
  .submit_button{
    width: 260px;
    height:30px;
    border-radius: 10px;
    border: none;
    padding-left: 5px;
    background-color: #409EFF;
    color: white;
    margin-left: 120px;
    cursor: pointer;
  }
  .submit_button:hover{
    background-color: #3A8EE6;

  }
  .submit_button2{
    width: 260px;
    height:30px;
    border-radius: 10px;
    border: none;
    padding-left: 5px;
    background-color: #409EFF;
    color: white;
    margin-left: 120px;
    cursor: pointer;
  }
  .submit_button2:hover{
    background-color: #3A8EE6;

  }
  .submitinfo{
    margin-left: 120px;
    margin-top: 20px;
    margin-bottom: 10px;
  }
</style>
